<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Audio</title>
    <link rel="stylesheet" href="music.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
    />
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> -->
  </head>

  <body>
    <input type="checkbox" id="check" />
    <label for="check">
      <i class="fas fa-bars" id="btn"></i>
      <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
      <header>Time App</header>
      <ul>
        <li>
          <a href="../../Schedule/schedule.html"
            ><i class="fas fa-clock"></i>Schedule</a
          >
        </li>
        <li>
          <a href="music.html"><i class="fas fa-music"></i>Music</a>
        </li>
        <li>
          <a href="../Idea/idea.html"><i class="fas fa-pen-nib"></i>Ideas</a>
        </li>
        <li>
          <a href="../../settings/settings.html"
            ><i class="fas fa-cog"></i>Settings</a
          >
        </li>
        <li>
          <a href="../../Report/report.html"
            ><i class="fas fa-calendar-week"></i>Reports</a
          >
        </li>
        <li>
          <a href="../../About/About.html"
            ><i class="far fa-question-circle"></i>Instructions</a
          >
        </li>
        <li>
          <a href="../../home/home.html"
            ><i class="fas fa-chevron-circle-left"></i>Home</a
          >
        </li>
      </ul>
    </div>

    <section>
      <div class="music_box">
        <h1 class="music_head">Music Player</h1>

        <button type="button" class="btn btn-success mx-3 mb-2" id="selectFile">
          Select File
        </button>

        <div id="music"></div>
      </div>
    </section>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
      crossorigin="anonymous"
    ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="music.js"></script>
  </body>
</html>
